import React, { FC, useEffect, useState } from 'react'
import { changeSize } from '@utils/electron'
import { Button, Divider, Form, Input, message, PageHeader, Radio, Tabs } from 'antd'
import { history } from 'umi'
// @ts-ignore
import styles from './index.less';

import { getAppConfig, saveAppConfig } from '@/services/appConfig';

const FormItem = Form.Item
const formTailLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 11 }
}
const tailLayout = {
  wrapperCol: { offset: 7, span: 13 }
}
interface AppConfigProps {
  location:any,
}

const AppConfig: FC<AppConfigProps> = (props) => {
  const [detail,setDetail] = useState<any>({});
  const [form] = Form.useForm();

  useEffect(() => {
    changeSize(800, 705, '系统配置')
    getData();
  }, [])

  const getData = () => {
    getAppConfig().then(res => {
      if (res.code === 10000) {
        setDetail(res.data);
        form.resetFields();
      }
    })
  }

  const handleOk = () => {
    form.validateFields().then((val) => {
      saveAppConfig(val).then(res => {
        if (res.code === 10000) {
          // 重启应用
          history.push('/restartApp');
        }
      })
    })
  }

  return (
    <div style={{ backgroundColor: '#fff' }}>
      <PageHeader
        onBack={() => history.push('/')}
        title="系统配置"
        subTitle='数据库配置'
      />
      <Form style={{ marginTop: 70 }} initialValues={detail}  form={form} onFinish={() => handleOk()}>
        <FormItem {...formTailLayout} name="host" rules={[{ required: true, message: '请输入IP地址' }]} label="IP地址">
          <Input placeholder="请输入IP地址"/>
        </FormItem>
        <FormItem {...formTailLayout} name="user" rules={[{ required: true, message: '请输入用户名' }]} label="用户名">
          <Input placeholder="请输入用户名"/>
        </FormItem>
        <FormItem {...formTailLayout} name="password" rules={[{ required: true, message: '请输入密码' }]} label="密码">
          <Input placeholder="请输入密码"/>
        </FormItem>
        <FormItem {...formTailLayout} name="port" rules={[{ required: true, message: '请输入端口' }]} label="端口">
          <Input placeholder="请输入端口"/>
        </FormItem>
        <FormItem {...formTailLayout} name="database" rules={[{ required: true, message: '请输入数据库名称' }]} label="数据库名称">
          <Input placeholder="请输入数据库名称"/>
        </FormItem>
        <FormItem {...tailLayout}>
          <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">保存</Button>
        </FormItem>
      </Form>
      <Divider style={{ margin: '40px 0 24px' }} />
      <div className={styles.desc}>
        <h3>说明</h3>
        <p>
          此配置为数据库配置，用来存放生成需要的数据，请务必认真填写！
        </p>
        <p>
          数据库名称为此App链接的数据库名称，系统会根据填写的数据自动生成需要的数据库，数据库用户无需任何配置。
        </p>
      </div>
    </div>
  )
}

export default AppConfig
